<template>
	<view class="my-wrapper">
		<view class="heard-wrapper">
			<view class="h-boxx">
				<view class="h-box">
					<!--  -->
					<image :src="userinfo.avatar? userinfo.avatar: '../../static/article-active.png'" mode=""></image>
				</view>
				<view class="right">
					<view class="zi1" @click="tiaologin()">
						{{userinfo.username? userinfo.username :'立即登录'}}
					</view>
					<view class="zi2">
						{{userinfo.username? '暂无描述' :'登录解锁更多功能'}}
						<u-icon name="grid" color="white" size="20" v-if="userinfo.username?true:false"
							@click="pjtiao()">
						</u-icon>
					</view>
				</view>



			</view>
			<view class="ii">
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" color="rgb(254, 189, 0)"
							:size="22"></u-icon>
						<text class="grid-text">{{listItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>

		</view>

		<view class="conten">
			<view class="box">
				<view class="left" @click="tiaoyhq()">
					<u-icon name="red-packet" color="#2979ff" size="20"></u-icon>
					我的优惠券
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="rgb(187, 187, 187)" size="15"></u-icon>
				</view>
			</view>
			<view class="box">
				<view class="left">
					<u-icon name="question-circle" color="#2979ff" size="20"></u-icon>
					常见问题
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="rgb(187, 187, 187)" size="15"></u-icon>
				</view>
			</view>
			<view class="box">
				<view class="left">
					<u-icon name="grid" color="#2979ff" size="20"></u-icon>
					设置
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="rgb(187, 187, 187)" size="15"></u-icon>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: [], //获取用户信息
				list: [{
						name: 'photo',
						title: '订单'
					},
					{
						name: 'lock',
						title: '消息'
					},
					{
						name: 'star',
						title: '收藏'
					},
					{
						name: 'hourglass',
						title: '在学'
					}
				],
			}
		},
		onShow() {
			this.userinfo = wx.getStorageSync("user")
		},
		methods: {
			tiaoyhq() {
				uni.navigateTo({
					url: "../mycoupon/mycoupon"
				})
			},
			//跳转编辑资料
			pjtiao() {
				uni.navigateTo({
					url: "../updatauser/updatauser"
				})
			},
			//跳转登录
			tiaologin() {
				if (this.userinfo.username) {
					uni.navigateTo({
						url: "../updatauser/updatauser"
					})
				} else {
					uni.navigateTo({
						url: "../login/login"
					})
				}
			}

		}
	}
</script>

<style lang="scss">
	.my-wrapper {
		width: 100%;
		height: 100%;

		.heard-wrapper {
			background-color: #5ccc84;
			height: 175px;
			width: 100%;
			border-bottom-left-radius: 50px;
			border-bottom-right-radius: 50px;

			.h-boxx {
				width: 100%;
				height: 140rpx;
				display: flex;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;

				.h-box {
					height: 120rpx;
					width: 120rpx;
					border-radius: 50%;
					background-color: white;
					margin-right: 20rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					flex: 1;
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.zi1 {
						font-size: 35rpx;
						color: white;
					}

					.zi2 {
						width: 100%;
						margin-top: 10rpx;
						font-size: 30rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: white;
					}
				}
			}

			.ii {
				width: 100%;
				display: flex;
				justify-content: center;

				.u-grid {
					height: 200rpx;
					background-color: white;
					height: 120rpx;
					width: 700rpx;
					box-shadow: 0 1rpx 6rpx gainsboro;
					border-radius: 4px;
					margin-top: 50rpx;
					font-size: 30rpx;
					color: #6c757d;
				}
			}

		}

		.conten {
			width: 100%;

			.box {
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				box-sizing: border-box;


				.left {
					font-size: 32rpx;
					color: #6c757d;
					display: flex;
					align-items: center;

					.u-icon {
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>
